<template>
    <d2-container class="warning-header">

        <el-card>
            <el-row :gutter="20">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="任务名称">
                        <el-input v-model="formInline.taskName" placeholder="" style="width:140px">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="周期类型">
                        <el-select v-model="formInline.periodType" placeholder="所有" style="width:140px">
                            <el-option label="分钟" value="0"></el-option>
                            <el-option label="小时" value="1"></el-option>
                            <el-option label="天" value="2"></el-option>
                            <el-option label="周" value="3"></el-option>
                            <el-option label="月" value="4"></el-option>
                            <el-option label="年" value="5"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button size="mini" round icon="el-icon-search" @click="onSubmitSearch" type="primary">搜索
                        </el-button>

                        <el-button size="mini" round type="primary" @click="handleNew">
                            创建任务
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-row>

        </el-card>
        <br/>


        <el-card>
            <el-table
                    :data="tableData.data"
                    :stripe="true"
                    :border="true"
                    tooltip-effect="dark"
                    style="width: 100%">

                <el-table-column prop="taskName" label="任务名称" align="center">
                </el-table-column>
                <el-table-column prop="periodTypeText" label="周期类型" align="center">
                </el-table-column>
                <el-table-column prop="period" label="周期" align="center">
                </el-table-column>
                <el-table-column prop="beginTime" label="开始时间" align="center">
                </el-table-column>
                <el-table-column prop="endTime" label="结束时间" align="center">
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.$index,scope.row)" size="mini" round
                                   icon="el-icon-edit" align="center" type="primary">巡查点
                        </el-button>
                        <el-button @click="handleDelClick(scope.$index,scope.row)" size="mini" round
                                   icon="el-icon-delete" align="center" type="danger">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!--分页操作 -->

        <template slot="footer">
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"

                        layout="prev, pager, next, jumper"
                        :total="tableData.total">
                </el-pagination>
            </div>
        </template>
        <!-- 编辑弹出处理页面-->
        <el-dialog
                title="创建任务"
                :visible.sync="editFormVisible"
                width="30%"
                :before-close="handleClose">
            <el-card>


                <el-form :inline="true" :model="detailData" class="demo-form-inline" ref="detailData">
                    <el-form-item label="任务名称" prop="taskName">
                        <el-input v-model="detailData.taskName" auto-complete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="周期" prop="period">
                        <el-input v-model="detailData.period" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="周期类型" prop="periodType">
                        <el-select v-model="detailData.periodType" placeholder="所有">
                            <el-option label="分钟" value="0"></el-option>
                            <el-option label="小时" value="1"></el-option>
                            <el-option label="天" value="2"></el-option>
                            <el-option label="周" value="3"></el-option>
                            <el-option label="月" value="4"></el-option>
                            <el-option label="年" value="5"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" :model="detailData" class="demo-form-inline" ref="detailData">
                    <el-form-item label="开始时间" prop="beginTime">

                        <el-date-picker
                                v-model="detailData.beginTime"
                                type="datetime"
                                placeholder="选择日期时间"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间" prop="endTime">
                        <el-date-picker
                                v-model="detailData.endTime"
                                type="datetime"
                                placeholder="选择日期时间"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-form>

            </el-card>
            <br/>


            <span slot="footer" class="dialog-footer">
                    <el-button style="text-align: center" @click="editFormVisible = false" >取消</el-button>
                    <el-button type="primary" @click="submitNew('detailData')"
                               style="text-align: center">确定</el-button>
            </span>
        </el-dialog>
    </d2-container>
</template>
<script>

    import {
        submitInspectTask,
        getInspectTaskList,
        deleteInspectTask
    } from "../../api/data/patrolMission/index";
    import {mapState} from 'vuex'

    export default {
        mounted() {
            let _this = this;

        },
        watch: {
            porjectNode: function (newnode, oldnode) {
                console.log('projectnode', newnode)
                this.project = newnode
                this.project.projectNo = newnode.dataId
                this.handleTable(this.project, 1)

            }
        },
        computed: {
            ...mapState('d2admin/projectSelect', [
                'porjectNode'
            ])
        },
        data() {
            return {
                project: null,

                currentPage: 1,
                formInline:{
                    taskName:'',
                    periodType:''
                },
                detailData: {
                    taskName:'',
                    periodType:'',
                    period:'',
                    beginTime:'',
                    endTime:'',

                },

                tableData: [],
                editFormVisible: false,

            }
        },
        methods: {
            handleTable(data = {}, pageno) {
                // let data = {};
                data = Object.assign(data, {pageno: pageno, pagesize: 10});
                getInspectTaskList(data).then(res => {
                    for(var item of res.data){
                        switch (item.periodType) {
                            case 0: item.periodTypeText = '分钟'
                                break
                            case 1: item.periodTypeText = '小时'
                                break
                            case 2: item.periodTypeText = '天'
                                break
                            case 3: item.periodTypeText = '周'
                                break
                            case 4: item.periodTypeText = '月'
                                break
                            case 5: item.periodTypeText = '年'
                                break
                        }
                    }
                    this.tableData = res;
                })

            },


            handleNew: function (index, row) {
                if (this.project === null) {
                    this.$message({
                        message: '请选择一个项目！',
                        type: 'warning'
                    });
                } else {
                    this.editFormVisible = true;
                }


            },



            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.handleTable(this.project, val)
            },

            handleClick: function (index, row) {

            },
            handleDelClick: function (index, row) {
                this.$confirm('此操作将永久删除项数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteInspectTask(row).then(res => {
                        if(res.state === 0){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.handleTable(this.project, 1)
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            onSubmitSearch(){
                this.formInline.projectNo=this.project.projectNo
                this.project =  Object.assign(this.project, this.formInline);
                this.handleTable(this.project, 1)
            },
            submitNew(detailData) {
                this.$refs[detailData].validate((valid) => {
                    if (valid) {

                        this.detailData.projectNo=this.project.projectNo
                        submitInspectTask(this.detailData).then(res => {

                            if(res.state === 0){
                                this.$message({
                                    message: '提交成功！',
                                    type: 'success'
                                });
                                this.editFormVisible = false
                                this.handleTable(this.project, 1)
                                this.$refs[detailData].resetFields();
                            }
                        })

                    } else {
                        this.$message({
                            message: '提交失败！',
                            type: 'error'
                        });
                        return false;
                    }
                });
            }

        }
    }
</script>
<style>
    .warning-header .d2-container-full__header {
        background: gainsboro !important;
    }

    .warning-header .d2-container-full__header {
        background: #1E9FFF !important;

    }

    .el-form-item__content {
        text-align: center;
    }

    .el-button {
        padding: 10px 30px;
        margin-right: 20px;
    }

    .el-form-item__label {
        margin-left: 5px;
    }

    .number1 {
        padding-left: 0px;
    }


</style>

